<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
			
		<!-- basic styles -->
		<link href="${ctx}/css/assets/css/bootstrap.min.css" rel="stylesheet" />
		<style>@import url("${ctx}/css/assets/css/non-responsive.min.css");</style>
        <link rel="stylesheet" type="text/css" href="${ctx}/css/assets/css/slide.css"/>

		<!-- ace settings handler -->
		<script type="text/javascript" src="${ctx}/css/assets/js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="${ctx}/css/assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="${ctx}/css/assets/js/slide.js"></script>

		<!--[if lte IE 8]>
		  <link rel="stylesheet" href="${ctx}/css/assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->


		<!--[if lt IE 9]>
		<script src="${ctx}/css/assets/js/html5shiv.js"></script>
		<script src="${ctx}/css/assets/js/respond.min.js"></script>
		<![endif]-->
		<script type="text/javascript">
			$(document).ready(function() {
			    // 变色特效
				var backgroundElement = window.top.cfgetTopBackgroundElement();
				$(backgroundElement).css("background","rgba(235,245,235,0.75)");

				$(".slideInner").slide({
					slideContainer: $('.slideInner a'),
					effect: 'easeOutCirc',
					autoRunTime: 5000,
					slideSpeed: 1000,
					nav: true,
					autoRun: true,
					prevBtn: $('a.prev'),
					nextBtn: $('a.next')
				});

                $(".img").width($(window).height());
                $(".img").height($(window).width());
			});
            $(window).on('resize', function () {
                $(".img").width($(window).height());
                $(".img").height($(window).width());
            });

		</script>
	</head>
	
	<body>         
		<%--<div class="slides" style="OVERFLOW-Y:hidden;">--%>
			<%--<div class="slideInner" style="margin-top:18px">--%>
				<%--<a href="#" style="background: url(${ctx}/css/assets/images/indexPage/1.jpg) no-repeat;">--%>
					<%--<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="${ctx}/img/wz1-bg.jpg"/> </div>--%>
				<%--</a>	--%>
				<%--<a href="#" style="background: url(${ctx}/css/assets/images/indexPage/1.jpg) no-repeat;">--%>
					<%--<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="${ctx}/img/wz2-bg.jpg"/> </div>--%>
				<%--</a>--%>
				<%--<a href="#" style="background: url(${ctx}/css/assets/images/indexPage/1.jpg) no-repeat;">--%>
					<%--<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="${ctx}/img/wz3-bg.jpg"/> </div>--%>
				<%--</a>				--%>
			<%--</div>--%>
			<%--<div class="nav">--%>
				<%--<a class="prev" href="javascript:;"></a>--%>
				<%--<a class="next" href="javascript:;"></a>--%>
			<%--</div>--%>
		<%--</div>		--%>


		<div id="carousel-example-generic" class="carousel slide"  data-ride="carousel" data-interval="3000">
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				<li data-target="#carousel-example-generic" data-slide-to="3"></li>
				<li data-target="#carousel-example-generic" data-slide-to="4"></li>
				<li data-target="#carousel-example-generic" data-slide-to="5"></li>
			</ol>
			<div id="imgPic" class="carousel-inner"  role="listbox">
				<div class="item active">
					<img src="${ctx}/img/wz1-bg.jpg" alt="First slide">
				</div>
				<div class="item">
					<img src="${ctx}/img/wz2-bg.jpg" alt="Second slide">
				</div>
				<div class="item">
					<img src="${ctx}/img/wz3-bg.jpg" alt="Third slide">
				</div>
				<div class="item">
					<img src="${ctx}/img/wz4-bg.jpg" alt="Fourth slide">
				</div>
				<div class="item">
					<img src="${ctx}/img/wz5-bg.jpg" alt="Fifth slide">
				</div>
				<div class="item">
					<img src="${ctx}/img/wz6-bg.jpg" alt="Sixth slide">
				</div>
			</div>
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>

	</body>
</html>


